<!DOCTYPE html>
<html lang="en">
<head>
<title>How do I create two columns inside a block on a Lessons page?</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="" name="description">
<link href="../css/help.css" media="all" rel="stylesheet" type="text/css" charset="utf-8">
<link href="/library/webjars/fontawesome/4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet">
<link href="/library/skin/morpheus-default/tool.css" media="screen" rel="stylesheet" type="text/css" charset="utf-8">
<script src="/library/webjars/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/library/js/headscripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    includeWebjarLibrary('featherlight');
    $(document).ready(function(){
      $("a.screensteps-image-zoom").featherlight({
        type: { image:true },
        closeOnClick: 'anywhere'
      }); 
    });   
</script>
</head>
<body>
  <div><div>
<div><h1 class="article-title">How do I create two columns inside a block on a Lessons page?</h1></div>
<div>



    <div class="step-instructions screensteps-textblock screensteps-wrapper--introduction screensteps-wrapper">
  <div id="text-content_57D6B2F9-6124-4111-ACC5-02271ACA3886" class="text-block-content">
    <p>Each of the blocks on a Lessons page can be broken into two columns inside its borders. To create two columns inside a block, follow the steps below. </p>
  </div>
</div>

      <div class="step screensteps-section screensteps-depth-1">
    <h2 class="step-title screensteps-heading">Go to Lessons.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/007/053/955/original/836965d4-2380-4c95-917b-8a824f11a269.png" alt="" height="110" width="202">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_582D5A23-9B7E-4496-96A9-2FAA3B2C91A9" class="text-block-content">
    <p>If you titled your page something other than <em>Lessons</em>, select the title of the page as it appears in your Tool Menu.</p>
  </div>
</div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_E49DFA91-BE80-4207-808D-93ECCFA29A03" class="text-block-content">
    <p>Click on the Lessons tool in the Tool Menu to display the page.</p>
<p><em>Note: The Lesson page must already contain content before adding sections.</em></p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="add-at-least-two-content-items-in-one-block">
    <h2 class="step-title screensteps-heading">Add at least two content items in one block. </h2>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/004/196/175/original/c7dd8acc-681a-4d4c-8105-d13dfb161b7e.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/004/196/175/medium/c7dd8acc-681a-4d4c-8105-d13dfb161b7e.png" alt="" height="258" width="855">
      </a>
  </div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="click-the-column-properties-button">
    <h2 class="step-title screensteps-heading">Click the Column Properties button.</h2>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/005/067/261/original/96293d2e-941c-4e38-81a7-9f21353548e4.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/005/067/261/medium/96293d2e-941c-4e38-81a7-9f21353548e4.png" alt="" height="501" width="855">
      </a>
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_DFD3C1E2-9A3E-4431-A82D-263A957FC7F3" class="text-block-content">
    <p>The Column Properties button is located in the top left of the content block. </p>
<p>In the Column Properties pop-up window, check the box for <strong>Two columns inside this one, text flows between them </strong>and click <strong>Save</strong>.  </p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="view-two-columns-within-the-block">
    <h2 class="step-title screensteps-heading">View two columns within the block.</h2>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/004/196/173/original/a32a1cbd-8cd1-4c5d-9cf1-5d57a33c7431.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/004/196/173/medium/a32a1cbd-8cd1-4c5d-9cf1-5d57a33c7431.png" alt="" height="222" width="855">
      </a>
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_01B8DD4B-7CDB-472B-99A6-5AC6EF7BDFBE" class="text-block-content">
    <p>You will now see two columns side-by-side inside a single content block. </p>
  </div>
</div>
 
  </div>


</div>
</div></div>
</body>
</html>
